<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>v-on指令</title>
</head>

<body>
  <div id="app">
      <!-- 为元素绑定事件 -->
      <input type="button" value="v-on指令" v-on:click="doIt">
       <!-- 指令可以简写为@ -->
      <input type="button" value="v-on@" @click="doIt">
      <!-- 传递参数-->
      <input type="button" value="v-on带参" @click="doIt1('you can ','you up')">
       <!-- 对事件进行限制, 限制触发的按键为回车-->
      <input type="text" @keyup.enter="sayHi">
  </div>

  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      methods: {
                doIt:function(){
                   console.log("无聊");  
                },
                doIt1:function(p1,p2){
                   console.log(p1 + p2);  
                },
                sayHi:function(){
                    alert("一边去");
                }
            },
    })  
  </script>
</body>

</html>